<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假申请</title>
    <title>Demo登录</title>
    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.js" type="text/javascript" rel="script"></script>
    <script src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/3.3.7/css/bootstrap.css"/>
    <script src="/webjars/jquery/3.4.1/jquery.js" type="text/javascript" rel="script"></script>
</head>
<body>
<div id="vuebox">
    <div style="padding: 100px 100px 10px;">
        <form class="bs-example bs-example-form" role="form">
            <br>
            <div class="input-group input-group-sm" v-show="state!='userApply'">
                <span class="input-group-addon">请假天数</span>
                <input type="text" class="form-control" placeholder="Twitterhandle" v-model="applyForm.day">
            </div>
            <div class="input-group input-group-sm" v-show="state!='userApply'">
                <span class="input-group-addon">请假原因</span>
                <input type="text" class="form-control" placeholder="Twitterhandle" v-model="applyForm.cause">
            </div>
            <div class="input-group input-group-sm" v-show="state=='userApply'">
                <span class="input-group-addon">请假天数</span>
                <input type="text" class="form-control" placeholder="Twitterhandle" v-model="userApplyForm.day">
            </div>
            <div class="input-group input-group-sm" v-show="state=='userApply'">
                <span class="input-group-addon">请假原因</span>
                <input type="text" class="form-control" placeholder="Twitterhandle" v-model="userApplyForm.cause">
            </div>
            <button class="btn btn-warning" type="button"  @click="applyE()" v-if="state!='userApply'">申请</button>
            <button class="btn btn-warning" type="button"  @click="userApply()" v-if="state=='userApply'">修改</button>
        </form>
    </div>
</div>


</body>
</html>
<script>
    var vm=new Vue({
        el:"#vuebox",
        data:{
            applyForm:{
                day:"7",
                cause:"生病"
            },
            userApplyForm:{
                day:"",
                cause:"",
                taskId:""
            },
            state:""
        },
        methods:{
            userApply:function(){
                axios.post(
                    "http://localhost:9999/userApplyTask",
                    this.userApplyForm,
                    {
                        headers:{
                            'token':sessionStorage.getItem("token")
                        }
                    }).then(res=>{
                        alert(res.data.data);
                        window.location.href="/main.html";
                })
            },
            applyE:function () {
                // alert(sessionStorage.getItem("token"));
                axios.post(
                    "http://localhost:9999/userAddTask",
                    this.applyForm,
                    {
                    headers:{
                        'token':sessionStorage.getItem("token")
                    }
                }).then(res=>{
                        if (res.data.code=="200"){
                            alert(res.data.data);
                            window.location.href="/main.html"
                        }else{
                            alert(res.data.message);
                        }
                })
            }
        },
        mounted(){
            console.log(sessionStorage);
            if (sessionStorage.getItem("state")==="userApply"){

                this.state=sessionStorage.getItem("state");
                this.userApplyForm.cause=sessionStorage.getItem("cause");
                this.userApplyForm.day=sessionStorage.getItem("day");
                this.userApplyForm.taskId=sessionStorage.getItem("taskId");
                this.sessionStorage.setItem("state","normal")
            }
        }
    })
</script>